<template>
  <div id="app">
    <el-container>
      <el-aside width="200px">
        <!--logo-->
        <div class="logo-box">
          <div @click="home" class="left-top">
            <img src="../assets/下载.svg" />
            <h2>GRTS</h2>
          </div>
        </div>
        <el-menu
          :router="true"
          class="el-menu-vertical-demo"
          background-color="#fb966f"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>讲师管理</span>
            </template>
            <!-- 当用户点击添加讲师按钮的时候跳转路由到/addTeacher
            下面去 -->
            <el-menu-item index="/addteacher">
              <i class="el-icon-s-custom"></i>
              添加讲师
            </el-menu-item>
            <el-menu-item index="/showteacher">
              <i class="el-icon-notebook-2"></i>
              讲师列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-files"></i>
              <span>课程分类管理</span>
            </template>
            <el-menu-item index="/subject">
              <i class="el-icon-document"></i>
              课程分类列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-notebook-1"></i>
              <span>课程管理</span>
            </template>
            <el-menu-item index="/courseinfo">
              <i class="el-icon-position"></i>
              发布课程
            </el-menu-item>
            <el-menu-item index="/showcourse">
              <i class="el-icon-s-order"></i>
              课程列表
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div id="title">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/showindex' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item v-if="flag">{{ name }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

          <div class="navbar-header">
            <el-dropdown>
              <img id="avatar" :src="avatar" />
              <h3 class="nickName">{{ nickName }}</h3>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>注销用户</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    return {
      avatar: "",
      nickName: "",
      name: "",
      flag: false,
    };
  },
  //create方法是一个组件被加载（替换）时创建的
  created() {
    let avatar = sessionStorage.getItem("avatar");
    let nickName = sessionStorage.getItem("nickName");
    this.avatar = avatar;
    this.nickName = nickName;
    //当刷新页面时 由于路径没有改变 所以不会走watch方法
    //但是由于刷新了页面 所以会重新走created方法
    //所以在created方法里面获取路由里面的meta值，把值绑定到页面上去
    this.flag = false;
    this.name = "";
    if (this.$route.path != "/index") {
      //取出路由中写死的meta值
      this.flag = true;
      this.name = this.$route.meta;
    }
  },
  //面包屑中的动态变化
  watch: {
    $route(to, from) {
      this.flag = false;
      this.name = "";
      if (to.path != "/index") {
        //取出路由中写死的meta值
        this.flag = true;
        this.name = to.meta;
      }
    },
  },
  methods: {
    home() {
      this.$router.push("/showindex");
    },
  },
};
</script>
<style scoped>
#avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;
}
.navbar-header {
  margin-right: 130px;
  float: right;
}
.el-header {
  background: #ffd1b7;
}
#title {
  float: left;
  height: 60ex;
  line-height: 60px;
}
.nickName {
  float: right;
  height: 60px;
  line-height: 60px;
}
.el-dropdown-menu {
  width: 150px;
  text-align: center;
}
.left-top {
  width: 200px;
  height: 60px;
  cursor: pointer;
  margin: 5px 0;
}
.left-top img {
  width: 60px;
  height: 40px;
  border-radius: 50%;
  margin: 4px 0px 10px 20px;
  float: left;
}
.left-top h2 {
  width: 115px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  float: left;
}
.el-breadcrumb {
  height: 60px;
  line-height: 60px;
}
</style>